<template>
    <div>
        <el-upload
            action="http://gulimall-graduate.oss-cn-shanghai.aliyuncs.com"
            :data="dataObj"
            :list-type="listType"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-preview="handlePreview"
            :limit="maxCount"
            :on-exceed="handleExceed"
            :show-file-list="showFile"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt/>
        </el-dialog>
    </div>
</template>
<script>
    import {policy} from "./policy";
    import {getUUID} from "@/utils";

    export default {
        name: "multiUpload",
        props: {
            //图片属性数组
            value: Array,
            //最大上传图片数量
            maxCount: {
                type: Number,
                default: 30,
            },
            listType: {
                type: String,
                default: "picture-card",
            },
            showFile: {
                type: Boolean,
                default: true,
            },
        },
        data() {
            return {
                dataObj: {
                    policy: "",
                    signature: "",
                    key: "",
                    ossaccessKeyId: "",
                    dir: "",
                    host: "",
                    uuid: "",
                },
                dialogVisible: false,
                dialogImageUrl: null,
            };
        },
        computed: {
            fileList() {
                let fileList = [];
                for (let i = 0; i < this.value.length; i++) {
                    fileList.push({url: this.value[i]});
                }
                return fileList;
            },
        },
        mounted() {
        },
        methods: {
            emitInput(fileList) {
                let value = [];
                for (let i = 0; i < fileList.length; i++) {
                    value.push(fileList[i].url);
                }
                this.$emit("input", value);
            },
            handleRemove(file, fileList) {
                this.emitInput(fileList);
            },
            handlePreview(file) {
                this.dialogVisible = true;
                this.dialogImageUrl = file.url;
            },
            beforeUpload(file) {
                let _self = this;
                return new Promise((resolve, reject) => {
                    policy()
                        .then((response) => {
                            console.log("这是什么${filename}");
                            _self.dataObj.policy = response.data.policy;
                            _self.dataObj.signature = response.data.signature;
                            _self.dataObj.ossaccessKeyId = response.data.accessid;
                            _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
                            _self.dataObj.dir = response.data.dir;
                            _self.dataObj.host = response.data.host;
                            resolve(true);
                        })
                        .catch((err) => {
                            console.log("出错了...", err);
                            reject(false);
                        });
                });
            },
            handleUploadSuccess(res, file) {
                this.fileList.push({
                    name: file.name,
                    // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
                    url:
                        this.dataObj.host +
                        "/" +
                        this.dataObj.key.replace("${filename}", file.name),
                });
                this.emitInput(this.fileList);
            },
            handleExceed(files, fileList) {
                this.$message({
                    message: "最多只能上传" + this.maxCount + "张图片",
                    type: "warning",
                    duration: 1000,
                });
            },
        },
    };
</script>
<style>
</style>
